<template>
  <com-header title="购物车" back="my" @callback="exitPage"></com-header>

  <van-empty description="暂无加购商品" v-if="cartParam.good.length == 0">
    <!-- <van-button round type="primary" size="large">去加购</van-button> -->
    <van-button type="primary" size="normal" @click="goHome">去加购</van-button>
  </van-empty>
  <van-checkbox-group
    v-model="checked"
    ref="checkboxGroupRef"
    @change="fnToggleSelection"
  >
    <van-row
      class="cart-item bg-f"
      type="flex"
      justify="space-between"
      align="center"
      v-for="(item, index) in cartParam.good"
    >
      <van-col :span="2">
        <van-checkbox :name="item.tao_id" @click.stop />
      </van-col>
      <van-col :span="6">
        <div class="img">
          <img :src="item.pict_url" alt="" />
        </div>
      </van-col>
      <van-col :span="14" class="content">
        <div class="ftn14 van-ellipsis">{{ item.title }}</div>
        <van-row class="p-t-10">
          <van-col :span="12" class="text-green"
            >￥{{ item.quanhou_jiage }}</van-col
          >
          <van-col :span="12" class="text-right">
            <van-button
              icon="minus"
              type="default"
              size="small"
              :disabled="item.num < 2"
              @click="fnToggleGood(0, item)"
            />
            <van-button type="default" size="small">{{ item.num }}</van-button>
            <van-button
              icon="plus"
              type="default"
              size="small"
              @click="fnToggleGood(1, item)"
            />
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </van-checkbox-group>
  <van-sticky position="bottom" offset-bottom="0">
    <footer class="padded-10 van-hairline--top">
      <van-row type="flex" justify="space-between" align="center">
        <van-col :span="4" class="text-center">
          <van-checkbox v-model="isAll" @click="toggleAll">全选</van-checkbox>
        </van-col>
        <van-col :span="20" class="text-right">
          <span>合计:</span>
          <span class="p-r-10 text-green ftn14">￥{{ totalPrice }}</span>
          <van-button type="primary" @click="goPay">结算</van-button>
        </van-col>
      </van-row>
    </footer>
  </van-sticky>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useStore } from "@/stores/store";
import type { IGood } from "@/types";
import type { CheckboxGroupInstance } from "vant";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const checked = ref([]),
      checked_list = ref([]),
      store = useStore(),
      isAll = ref(true),
      router = useRouter();
    let totalPrice = ref<any>(0);
    const cartParam = ref({
        good: store.state.cart.good,
      }),
      checkboxGroupRef = ref<CheckboxGroupInstance>();
    checked.value = store.state.cart.good.map((item: IGood) => item.tao_id);
    // 更改商品数量
    const fnToggleGood = (type: number, item: IGood) => {
      let { tao_id } = item;
      let index = cartParam.value.good.findIndex(
        (div: IGood) => div.tao_id == tao_id
      );
      type
        ? cartParam.value.good[index].num++
        : cartParam.value.good[index].num--;
      fnSumPrice();
    };
    // 选择或取消商品
    const fnToggleSelection = () => {
      isAll.value =
        checked.value.length == cartParam.value.good.length ? true : false;
      fnSumPrice();
    };
    // 筛选商品切换价格
    const fnSumPrice = () => {
      checked_list.value = cartParam.value.good.filter((item: IGood) =>
        checked.value.some((it) => it === item.tao_id)
      );

      totalPrice.value = checked_list.value.reduce(
        (accumulator: number, currentValue: any) =>
          accumulator + Number(currentValue.quanhou_jiage) * currentValue.num,
        0
      );
      totalPrice.value = totalPrice.value.toFixed(2);
    };
    // 全选或不选
    const toggleAll = () => {
      checkboxGroupRef.value?.toggleAll(isAll.value);
      fnSumPrice();
    };
    // 退出页面
    const exitPage = () => {
      // 存储当前购物车的数据
      let num = cartParam.value.good.reduce(
        (total: number, cur: any) => total + cur.num,
        0
      );
      store.commit("editCart", { good: cartParam.value.good, num: num });
      store.commit("addOrder", {
        list: checked_list.value,
        total_price: totalPrice.value,
      });
    };
    // 去结算
    const goPay = () => {
      exitPage();
      router.push({
        name:
          store.state.addressData.list.length == 0 ? "address" : "create_order",
      });
    };

    // 返回首页
    const goHome = () => {
      router.push({
        name: "home",
      });
    };
    onMounted(() => {
      fnSumPrice();
    });
    return {
      checked,
      isAll,
      cartParam,
      totalPrice,
      checkboxGroupRef,
      fnToggleGood,
      fnSumPrice,
      toggleAll,
      fnToggleSelection,
      exitPage,
      goPay,
      goHome,
    };
  },
});
</script>
<style lang="less" scoped>
.cart-item {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  .img {
    position: relative;
    width: 100%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
footer {
  position: fixed !important;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 999;
}
</style>
